<template>
    <div class="login-page">
        <el-card class="box-card">
            <h3>系统登陆</h3>
            <el-form label-position="right" :model="form" ref="form" :rules="rules" label-width="80px">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="form.userName" />
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                    <el-input v-model="form.passWord" type="password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitLogin" style="width: 80%;">登录</el-button>
                </el-form-item>
            </el-form>
            <h3>123123</h3>
        </el-card>
    </div>
</template>

<script>
import Mock from 'mockjs';
import Cookie from 'js-cookie';
import { getMenu } from '../api/index';
/*
    * @desc 登录页
    * @author rz
    * @date 2024-2-23
*/
export default {
    name: "",
    data() {
        return {
            msg: "组件中的msg",
            form: {
                userName: "",
                passWord: "",
            },
            rules: {
                userName: [{ required: true, message: "请输入用户名", trigger: 'blur,change' }],
                passWord: [{ required: true, message: "请输入密码", trigger: 'blur,change' }]
            }
        }
    },
    methods: {
        // 登录
        submitLogin() {
            this.$refs.form.validate((valid) => {
                // 校验通过
                if (valid) {
                    getMenu(this.form).then(res => {
                        console.log("打印res", res);
                        // 登录成功,存入token;导航守卫根据token进行跳转;
                        if (res.data.code === 20000) {
                            console.log("打印当前router的实例", this.$router);
                            this.$message.success('登录成功');
                            Cookie.set('token', res.data.data.token || "");
                            // 将动态数据存入store
                            this.$store.commit('saveMenuData', res.data.data.menu);
                            // 跳转至首页
                            this.$router.push('/home');
                        } else {
                            this.$message.error('登录失败,账号密码不正确');
                        }
                    })
                }
            })
        },
    },
    mounted() {
        console.log("mixin中的msg数据", this._vnode);
    }
}
</script>

<style lang="less" scoped>
.login-page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .box-card {
        width: 400px;
        height: 250px;
        text-align: center;

        h3 {
            margin-bottom: 30px;
        }

        .el-input {
            width: 100%;
        }
    }
}
</style>